{% extends "layouts/examples.njk" %}

{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
<h1 class="govuk-heading-xl">Multiple radio groups</h1>

<div class="govuk-grid-row">
  <div class="govuk-grid-column-one-half">
    <form method="get" novalidate>
      <fieldset class="govuk-fieldset">
        <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
          <h2 class="govuk-fieldset__heading">
            What is your favourite colour?
          </h2>
        </legend>
        <h3 class="govuk-heading-m">Warm colours</h3>
        {{ govukRadios({
          idPrefix: "warm",
          name: "colour",
          items: [
            {
              value: "red",
              text: "Red",
              conditional: {
                html: '<p class="govuk-body">Nice choice, I like red too.</p>'
              }
            },
            {
              value: "orange",
              text: "Orange",
              conditional: {
                html: '<p class="govuk-body">Nice choice, I like orange too.</p>'
              }
            }
          ]
        }) }}

        <h3 class="govuk-heading-m">Cool colours</h3>
        {{ govukRadios({
          idPrefix: "cool",
          name: "colour",
          items: [
            {
              value: "blue",
              text: "Blue",
              conditional: {
                html: '<p class="govuk-body">Nice choice, I like blue too.</p>'
              }
            },
            {
              value: "green",
              text: "Green",
              conditional: {
                html: '<p class="govuk-body">Boo, you monster...</p>'
              }
            }
          ]
        }) }}

        <h3 class="govuk-heading-m">Do you like colours in general?</h3>
        {{ govukRadios({
          idPrefix: "colours-in-general",
          name: "colours-in-general",
          items: [
            {
              value: "yes",
              text: "Yes",
              conditional: {
                html: '<p class="govuk-body">Fair enough.</p>'
              }
            },
            {
              value: "no",
              text: "No",
              conditional: {
                html: '<p class="govuk-body">No judgment.</p>'
              }
            }
          ]
        }) }}
      </fieldset>
      {{ govukButton({
        text: "Submit"
      }) }}
    </form>
  </div>
  <div class="govuk-grid-column-one-half">
    <form method="get" novalidate>
      <fieldset class="govuk-fieldset">
        <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
          <h2 class="govuk-fieldset__heading">
            What is your least favourite colour?
          </h2>
        </legend>
        <h3 class="govuk-heading-m">Warm colours</h3>
        {{ govukRadios({
          idPrefix: "least-warm",
          name: "colour",
          items: [
            {
              value: "red",
              text: "Red",
              conditional: {
                html: '<p class="govuk-body">Nice choice, I like red too.</p>'
              }
            },
            {
              value: "orange",
              text: "Orange",
              conditional: {
                html: '<p class="govuk-body">Nice choice, I like orange too.</p>'
              }
            }
          ]
        }) }}

        <h3 class="govuk-heading-m">Cool colours</h3>
        {{ govukRadios({
          idPrefix: "least-cool",
          name: "colour",
          items: [
            {
              value: "blue",
              text: "Blue",
              conditional: {
                html: '<p class="govuk-body">Nice choice, I like blue too.</p>'
              }
            },
            {
              value: "green",
              text: "Green",
              conditional: {
                html: '<p class="govuk-body">Boo, you monster...</p>'
              }
            }
          ]
        }) }}
      </fieldset>
      {{ govukButton({
        text: "Submit"
      }) }}
    </form>

    <h3 class="govuk-heading-m">A question that is not in a form</h3>
    {{ govukRadios({
      idPrefix: "question-not-in-form",
      name: "question-not-in-form",
      items: [
        {
          value: "yes",
          text: "Yes",
          conditional: {
            html: '<p class="govuk-body">Fair enough.</p>'
          }
        },
        {
          value: "no",
          text: "No",
          conditional: {
            html: '<p class="govuk-body">No judgment.</p>'
          }
        }
      ]
    }) }}
  </div>
</div>
{% endblock %}
